<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



    <link rel="stylesheet" href="static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="static/css/entypo.css">
    <link rel="stylesheet" href="static/css/css.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/neon-core.css">
    <link rel="stylesheet" href="static/css/neon-theme.css">
    <link rel="stylesheet" href="static/css/neon-forms.css">
    <link rel="stylesheet" href="static/css/custom.css">

    <script src="static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<script type="text/javascript">



    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>


<div class="row"  id="app">
    <div class="col-sm-3">

        <div class="tile-stats tile-red">
            <div class="icon"><i class="entypo-users"></i></div>

            <h3>注册用户:{{memberlist.length}}人</h3>
        </div>

    </div>

    <div class="col-sm-3">

        <div class="tile-stats tile-green">
            <div class="icon"><i class="entypo-chart-bar"></i></div>
            <h3>收录歌曲:{{movielist.length}}首</h3>
        </div>

    </div>

    <!--<div class="col-sm-3">-->

        <!--<div class="tile-stats tile-aqua">-->
            <!--<div class="icon"><i class="entypo-mail"></i></div>-->
            <!--<div class="num" data-start="0" data-end="23" data-postfix="" data-duration="1500"-->
                 <!--data-delay="1200">0-->
            <!--</div>-->

            <!--<h3>New Messages</h3>-->
            <!--<p>messages per day.</p>-->
        <!--</div>-->

    <!--</div>-->

    <!--<div class="col-sm-3">-->

        <!--<div class="tile-stats tile-blue">-->
            <!--<div class="icon"><i class="entypo-rss"></i></div>-->
            <!--<div class="num" data-start="0" data-end="52" data-postfix="" data-duration="1500"-->
                 <!--data-delay="1800">0-->
            <!--</div>-->

            <!--<h3>Subscribers</h3>-->
            <!--<p>on our site right now.</p>-->
        <!--</div>-->

    <!--</div>-->
</div>

<br>

<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-primary" id="charts_env">

            <div  id="tx1" style="width: 100%;height:450px;">
            </div>



        </div>

    </div>


</div>



<br>





<link rel="stylesheet" href="static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="static/js/main-gsap.js"></script>
<script src="static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/joinable.js"></script>
<script src="static/js/resizeable.js"></script>
<script src="static/js/neon-api.js"></script>
<script src="static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="static/js/jquery.sparkline.min.js"></script>
<script src="static/js/d3.v3.js"></script>
<script src="static/js/rickshaw.min.js"></script>
<script src="static/js/raphael-min.js"></script>
<script src="static/js/morris.min.js"></script>
<script src="static/js/toastr.js"></script>
<script src="static/js/neon-chat.js"></script>
<script src="static/js/neon-custom.js"></script>
<script src="static/js/neon-demo.js"></script>
</body>




<script type="text/javascript" src="../axios/vue.js"></script>
<script type="text/javascript" src="../axios/axios.min.js"></script>
<script type="text/javascript" src="../axios/qs.js"></script>
<script type="text/javascript" src="../axios/getUrlParams.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../axios/echart.min.js"></script>
<script>


    var qs = Qs
    var vmm = new Vue({
        el:'#app',
        data:{
            memberlist:[],
            movielist:[],
            nlist:[],
            slist:[],
        },
        mounted(){
            this.getmemberlist()
            this.getmovielist()
            this.getlineData();

        },
        methods: {
            getlineData(){

                axios.post('lineTj',qs.stringify({
                })).then(response =>{

                this.nlist = response.data.nlist
                this.slist = response.data.slist

                var myChart = echarts.init(document.getElementById('tx1'));

                option = {
                    title: {
                        // text: '销售额走势图',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },

                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: vmm.nlist
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [
                        {
                            name:'点赞量',
                            type:'line',
                            data:vmm.slist,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大量'},
                                    {type: 'min', name: '最小量'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均点赞量'}
                                ]
                            }
                        }
                    ]
                };


                myChart.setOption(option);

            }).catch(error =>{

                })

            },
            getmemberlist() {
                axios.post('memberList',qs.stringify({
                })).then(response =>{
                    this.memberlist = response.data.list
            }).catch(error =>{
                    console.log(error)
            })
            },
            getmovielist() {
                axios.post('movieList',qs.stringify({
                    shstatus:'通过'
                })).then(response =>{
                    this.movielist = response.data.list
            }).catch(error =>{
                    console.log(error)
            })
            },

        },

    })

</script>

</html>